export function observerFn(arr, fn) {
  const arrDom = arr.map(item => document.querySelector(item))
  // 创建一个观察器实例
  const observer = new IntersectionObserver(
    entries => {
      entries.forEach(entry => {
        console.log('entry', entry)

        // if (
        //   entry.isIntersecting &&
        //   entry.boundingClientRect.top === entry.rootBounds?.top
        // ) {
        //   fn(entry)
        //   // intersectionCallback(entry);
        // }

        // if (entry.isIntersecting) {
        //   // console.log('元素进入视口中了!', entry)
        //   fn(entry)
        // }
      })
    },
    {
      // root: null, // 使用默认的视口作为根
      threshold: 0,
      // rootMargin: '0px 0px -100% 0px', // 不使用rootMargin
    }
  )
  // 开始观察目标元素
  arrDom.forEach(item => {
    if (item) {
      observer.observe(item)
    }
  })
}

// 封装使用IntersectionObserver实现按钮状态更新的方法
export function handleIntersectionObserver(
  intersectionCallback,
  scrollElementId
) {
  // 获取特定滚动元素
  const scrollElement = document.getElementById(scrollElementId)
  if (!scrollElement) return
  const scrollElementTop = scrollElement.getBoundingClientRect().top
  const scrollChildrenElement = scrollElement?.children || []
  console.log('scrollElementTop', scrollElementTop)

  function scrollHandler(event) {
    let scrollTop = event.target.scrollTop
    if (scrollTop === 0) {
      intersectionCallback(scrollChildrenElement[0])
      removeEventListenerScroll(scrollElement)
    }
  }

  function addEventListenerScroll(el) {
    el.addEventListener('scroll', scrollHandler)
  }
  function removeEventListenerScroll(el) {
    el.removeEventListener('scroll', scrollHandler)
  }

  // 创建IntersectionObserver实例
  const observer = new IntersectionObserver(
    entries => {
      entries.forEach(entry => {
        console.log(entry)
        if (
          // 初始化时候的判断
          entry.isIntersecting === true &&
          entry.boundingClientRect.top === scrollElementTop
        ) {
          intersectionCallback(entry.target)
          const ele = entry.target
          intersectionCallback(ele)
          if (scrollChildrenElement[1] === ele) {
            addEventListenerScroll(scrollElement)
          } else {
            removeEventListenerScroll(scrollElement)
          }
        }
        if (
          entry.isIntersecting === true &&
          (entry.boundingClientRect.top < 0 ||
            entry.boundingClientRect.bottom >= scrollElementTop)
        ) {
          // 出现的的时候
          const ele = entry.target.nextElementSibling
          addEventListenerScroll(scrollElement)
          if (scrollChildrenElement[1] === ele) {
            intersectionCallback(ele)
          } else {
            removeEventListenerScroll(scrollElement)
          }
        }
        if (
          // 往上滑消失的时候
          entry.isIntersecting === false &&
          entry.boundingClientRect.top < 0
        ) {
          // 出现的的时候
          const ele = entry.target.nextElementSibling
          intersectionCallback(ele)
          if (scrollChildrenElement[1] === ele) {
            addEventListenerScroll(scrollElement)
          } else {
            removeEventListenerScroll(scrollElement)
          }
        }
      })
    },
    {
      root: scrollElement,
      // threshold: 1, // 设置为1，表示完全进入视口时触发
      // rootMargin: '0px 0px -100% 0px', // 视口顶部对齐时触发回调
    }
  )
  // 遍历特定元素的子元素并观察
  Array.from(scrollChildrenElement).forEach(element => {
    observer.observe(element)
  })
}

// 调用封装的方法处理IntersectionObserver和按钮状态更新
